<template>
        <div>
            <div>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: backHomeStart+'EchartsList' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>商品中心</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: backHomeStart+'GoodsList' }">商品列表</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: backHomeStart+'AddGoods' }">添加商品</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-divider></el-divider>
            <div class="contentSize">
                <div class="addGoodInfo">
                    <h1>添加商品</h1>
                    <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="商品名称" prop="goodsname">
                            <el-input v-model="ruleForm.goodsname"></el-input>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="一级分类" prop="goodsfirstcategoryid">
                            <el-select v-model="ruleForm.goodsfirstcategoryid" placeholder="请选择">
                                <div v-for="(firstCategory) in firstCategorys">
                                    <el-option :label="firstCategory.fcName" :value="firstCategory.fcId"></el-option>
                                </div>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级分类" prop="goodssecondcategoryid">
                            <el-select v-model="ruleForm.goodssecondcategoryid" placeholder="请选择">
                                <div v-for="(secondCategory) in secondCategorys">
                                    <el-option :label="secondCategory.scName" :value="secondCategory.scId"></el-option>
                                </div>
                            </el-select>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="商品品牌" prop="goodsbrand" >
                            <el-select v-model="ruleForm.goodsbrand" placeholder="请选择商品品牌">
                                <div v-for="goodsBrand in brands">
                                    <el-option :label="goodsBrand" :value="goodsBrand"></el-option>
                                </div>
                            </el-select>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="商品折扣" prop="goodsdiscount">
                            <el-input v-model="ruleForm.goodsdiscount"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格" prop="goodsprice">
                            <el-input v-model="ruleForm.goodsprice"></el-input>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="上架状态" prop="goodsstatus">
                            <el-select v-model="ruleForm.goodsstatus" placeholder="请选择上架状态">
                                <div v-for="(goodsStatus,index) in status">
                                    <el-option :label="goodsStatus" :value="index+1"></el-option>
                                </div>
                            </el-select>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="商品标签" prop="goodslabel">
                            <el-select v-model="ruleForm.goodslabel" placeholder="请选择上架状态">
                                <div v-for="goodslabel in labels">
                                    <el-option :label="goodslabel" :value="goodslabel"></el-option>
                                </div>
                            </el-select>
                        </el-form-item>
                        <el-divider></el-divider>
                        <div class="add_left">
                            <h4>添加商品图片</h4>
                            <el-upload
                                    action="#"
                                    ref="upload"
                                    multiple="multiple"
                                    list-type="picture-card"
                                    :file-list="picList"
                                    :show-file-list="true"
                                    :http-request="uploadFiles"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                                    :on-change="handleChange"
                                    :auto-upload="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </div>
                        <el-divider></el-divider>
                        <el-form-item style="text-align: center">
                            <el-button type="primary" @click="submitForm('ruleForm')">创建商品</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        name: "AddGoods",
        data() {
            return {
                formatData:null,
                dialogImageUrl: '',
                dialogVisible: false,
                picList:[],
                firstCategorys:[],
                secondCategorys:[],
                brands:this.$store.state.brands,
                status:['上架','下架'],
                labels:this.$store.state.labelMarks,
                backHomeStart:this.$store.state.backHomeHeader,
                ruleForm: {
                    goodsname: '',
                    goodsfirstcategoryid:'',
                    goodssecondcategoryid:'',
                    goodsbrand: '',
                    goodsdiscount:'',
                    goodsprice: '',
                    goodsstatus: '',
                    goodslabel: '',
                    files:[],

                },
                rules: {
                    goodsname: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                    ],
                    goodsfirstcategoryid: [
                        { required: true, message: '请选择一级分类', trigger: 'change' }
                    ],
                    goodssecondcategoryid: [
                        { required: true, message: '请选择二级分类', trigger: 'change' }
                    ],
                    goodsbrand: [
                        { required: true, message: '请选择品牌', trigger: 'change' }
                    ],
                    goodsdiscount: [
                        { required: true, message: '请输入折扣', trigger: ['change','blur'] }
                    ],
                    goodsprice: [
                        { required: true, message: '请输入商品价格', trigger: 'blur' },
                        { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: ['change','blur'] }
                    ],
                    goodsstatus: [
                        {required: true, message: '请选择是否上架', trigger: 'change' }
                    ],
                    goodslabel: [
                        { required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ]
                }
            };
        },
        beforeCreate() {

        },
        created() {
            this.loadCategoryData();
        },
        methods: {
            loadCategoryData(){
                this.$axios.get("/firstcategory/list").then(result=>{
                    console.log(result);
                    this.firstCategorys=result.data;
                }).catch(err=>{
                    console.log(err)
                });
                this.$axios.get("/secondcategory/list").then(result=>{
                    this.secondCategorys=result.data;
                    console.log(result);
                }).catch(err=>{
                    console.log(err)
                });
            },
            saveGoods(goods){
                this.$axios.post("/goods/save",goods,{headers:{'Content-type':'multipart/form-data;charset=utf-8'}}
                ).then(reulst=>{
                    this.addResult(reulst.data);
                    this.$router.push("/BackHome/GoodsList");
                }).catch(err=>{
                    alert(err);
                })
            },
            changToFormData(formatData,goods){
                formatData.append("goodsname",goods.goodsname);
                formatData.append("goodsfirstcategoryid",goods.goodsfirstcategoryid);
                formatData.append("goodssecondcategoryid",goods.goodssecondcategoryid);
                formatData.append("goodsbrand",goods.goodsbrand);
                formatData.append("goodsdiscount",goods.goodsdiscount);
                formatData.append("goodsprice",goods.goodsprice);
                formatData.append("goodsstatus",goods.goodsstatus);
                formatData.append("goodslabel",goods.goodslabel);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.formatData = new FormData();
                        this.$refs.upload.submit();
                        this.changToFormData(this.formatData,this.ruleForm);
                        console.log(this.ruleForm);
                        this.saveGoods(this.formatData);
                    } else {
                        console.log('数据有误!!');
                        return false;
                    }

                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            addResult(val) {
                this.$message({
                    showClose: true,
                    message: val===true?'恭喜你，添加成功！':'错了哦，添加失败！',
                    type: val===true?'success':'error'
                });
            },

            handleRemove(file, fileList) {
                /*删除文件*/
                console.log('删除');
                console.log(file, fileList);
            },
            handleChange(file, fileList) {
                // console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            uploadFiles(file){
                console.log(file.file);
                this.ruleForm.files.push(file.file);
                this.formatData.append("goodsPicFiles",file.file);
            }

        },
        components:{

        }
    }
</script>

<style scoped>
    .contentSize{
        padding: 30px;

    }
    .addGoodInfo{
        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 800px;
        border-radius: 5px;

    }
    .el-input{
        max-width: 700px;
    }
    .borderLine{
        border: 1px solid red;
    }
    .el-form{
        text-align: left;
    }
    .el-form-item{
        /*border: 1px solid red;*/
        width: 600px;
    }
    .add_left{
        /*width: 400px;*/
        /*float: left;*/
        /*border: 1px solid red;*/
        margin-left: 20px;
        text-align: left;
    }
    .add_right{
        text-align: left;
        float: right;
        margin-left: 50px;
        width: 660px;
        border: 1px solid red;
    }

</style>